{% load static %}

{% block content %}
<div class="container mt-4">
    <!-- 页面标题卡片 -->
    <div class="page-header card mb-4">
        <div class="card-body d-flex justify-content-between align-items-center">
            <div>
                <h1 class="page-title">
                    <i class="fas fa-clipboard-check text-primary"></i>
                    收到的申请
                </h1>
                <p class="text-muted mb-0">管理所有职位的申请记录</p>
            </div>
            <div class="position-stats">
                <div class="stat-item">
                    <span class="stat-label">待处理</span>
                    <span class="stat-value text-warning">{{ pending_count }}</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">已处理</span>
                    <span class="stat-value text-success">{{ processed_count }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 申请列表卡片 -->
    <div class="card shadow-sm application-card">
        <div class="card-body p-0">
            {% if applications %}
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>申请人</th>
                                <th>应聘职位</th>
                                <th>申请时间</th>
                                <th>申请状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for application in applications %}
                                <tr class="application-row">
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-circle">
                                                <i class="fas fa-user"></i>
                                            </div>
                                            <div class="ms-3">
                                                <strong class="d-block">{{ application.user.username }}</strong>
                                                <small class="text-muted">应聘者</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="job-title">
                                            <strong class="d-block">{{ application.job.title }}</strong>
                                            <small class="text-muted">{{ application.job.company }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="time-info">
                                            <span class="d-block">{{ application.applied_at|date:'Y-m-d' }}</span>
                                            <small class="text-muted">{{ application.applied_at|date:'H:i' }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        {% if application.status == 'pending' %}
                                            <span class="status-badge status-pending">
                                                <i class="fas fa-clock me-1"></i>待处理
                                            </span>
                                        {% elif application.status == 'accepted' %}
                                            <span class="status-badge status-accepted">
                                                <i class="fas fa-check-circle me-1"></i>已通过
                                            </span>
                                        {% elif application.status == 'rejected' %}
                                            <span class="status-badge status-rejected">
                                                <i class="fas fa-times-circle me-1"></i>已拒绝
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="action-buttons">
                                            <a href="{% url 'job:export_resume' %}"
                                               class="btn btn-icon btn-view view-resume"
                                               style="color: black;"
                                               title="查看简历">
                                                <i class="fas fa-file-alt"></i>
                                            </a>
                                            {% if application.status == 'pending' %}
                                                <a href="{% url 'job_apply:accept_application' application.id %}"
                                                   class="btn btn-icon btn-accept accept-application"
                                                   style="color: black;"
                                                   title="通过申请">
                                                    <i class="fas fa-check"></i>
                                                </a>
                                                <a href="{% url 'job_apply:reject_application' application.id %}"
                                                   class="btn btn-icon btn-reject reject-application"
                                                   style="color: black;"
                                                   title="拒绝申请">
                                                    <i class="fas fa-times"></i>
                                                </a>
                                            {% endif %}
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <div class="empty-state">
                    <div class="empty-state-icon">
                        <i class="fas fa-inbox"></i>
                    </div>
                    <h3>暂无收到的申请</h3>
                    <p>当求职者申请您发布的职位后，将会显示在这里</p>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<style>
    /* 页面整体样式 */
    .container {
        max-width: 1200px;
    }

    /* 页面标题样式 */
    .page-header {
        background: white;
        border: none;
        border-radius: 15px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    }

    .page-title {
        font-size: 1.75rem;
        font-weight: 600;
        margin: 0;
        color: #2c3e50;
    }

    .page-title i {
        margin-right: 12px;
    }

    /* 统计数据样式 */
    .position-stats {
        display: flex;
        gap: 20px;
    }

    .stat-item {
        text-align: center;
        padding: 8px 16px;
        background: #f8f9fa;
        border-radius: 8px;
    }

    .stat-label {
        display: block;
        font-size: 0.875rem;
        color: #6c757d;
    }

    .stat-value {
        font-size: 1.25rem;
        font-weight: 600;
    }

    /* 表格样式 */
    .application-card {
        border: none;
        border-radius: 15px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
        overflow: hidden;
    }

    .table {
        margin: 0;
    }

    .table thead tr {
        background: #f8f9fa;
    }

    .table th {
        font-weight: 600;
        color: #2c3e50;
        border-top: none;
        padding: 1rem;
    }

    .table td {
        padding: 1rem;
        vertical-align: middle;
    }

    /* 头像样式 */
    .avatar-circle {
        width: 40px;
        height: 40px;
        background: #e9ecef;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6c757d;
    }

    /* 状态标签样式 */
    .status-badge {
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.875rem;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
    }

    .status-pending {
        background-color: #fff3cd;
        color: #856404;
    }

    .status-accepted {
        background-color: #d4edda;
        color: #155724;
    }

    .status-rejected {
        background-color: #f8d7da;
        color: #721c24;
    }

    /* 按钮样式 */
    .action-buttons {
        display: flex;
        gap: 8px;
    }

    .btn-icon {
        width: 36px;
        height: 36px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        transition: all 0.2s ease;
    }

    .btn-view {
        background: #e3f2fd;
        color: #1976d2;
    }

    .btn-accept {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .btn-reject {
        background: #fce4ec;
        color: #c2185b;
    }

    .btn-icon:hover {
        transform: translateY(-2px);
    }

    /* 空状态样式 */
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: #6c757d;
    }

    .empty-state-icon {
        font-size: 3rem;
        color: #adb5bd;
        margin-bottom: 1rem;
    }

    .empty-state h3 {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }

    /* 动画效果 */
    .application-row {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .application-row:hover {
        transform: translateX(5px);
        background-color: #f8f9fa;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .card {
        animation: fadeIn 0.5s ease-out;
    }

    /* 响应式调整 */
    @media (max-width: 768px) {
        .position-stats {
            flex-direction: column;
            gap: 10px;
        }

        .action-buttons {
            flex-wrap: wrap;
        }

        .table td {
            padding: 0.75rem;
        }
    }
</style>

{% endblock %}

{% block extra_js %}
<script src="https://kit.fontawesome.com/your-font-awesome-kit.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 由于使用链接导航，不再需要JavaScript事件处理
});
</script>
{% endblock %}